 <template>
  <li class="li__item">
    <div
      :class="[isFolder?'bold': 'unbold', 'nomal', activeName === model._id ? 'active':'']" class="item" @click.stop="nodeClick(model)">
        <div class="add-back">
          <div class="show-node">
            <span class="is-open" v-if="isFolder"
                @click.stop="toggle"
                @dblclick.stop="changeType">
              <i :class="deploy ? 'el-icon-minus' : 'el-icon-plus'"></i>
              </span>
              <span class="node__mask"
                @dragstart = "dragstart(model)"
                :draggable = "dealTree.move"
                @dragover="dragover"
                @drop="drop(model)"
                @dragend = "dragend">
                <i class="icon iconfont icon-wenjian"></i>
                 <span class="name">{{model.name}}</span>
              </span>
          </div>
           <div class="edit-node">
              <i class="icon iconfont icon-zhankai"
                 @click.stop="handlerChange('addChild', model)"
                 v-if = "dealTree.add"></i>
              <i class="icon iconfont icon-beizhu"
                 @click.stop="handlerChange('editChild', model)"
                 v-if = "model.pId && dealTree.edit"></i>
              <i class="icon iconfont icon-guanbi"
                @click.stop="handlerChange('deleteChild', model)"
                v-if="model.pId && dealTree.delete"></i>
          </div>
        </div>
    </div>
    <ul v-show="deploy" class="last-option" v-if="isFolder">
      <item
        class="item"
        v-for="model in model.children"
        @addChild="handlerSelfChange"
        @editChild="handlerSelfChange"
        @deleteChild="handlerSelfChange"
        @nodeClick="handlerSelfClick"
        @moveDept = "moveDept"
        :dealTree = "dealTree"
        :open="deploy"
        :active = "active"
        :model="model">
      </item>
    </ul>
    <el-dialog :close-on-click-modal="false" modal-append-to-body lock-scroll top="20%" :title="$t('config.agent.moveAgent')" :visible.sync="dialogShow" width="30%">
      <span>{{$t('config.agent.moveAgentTip', {treeNodes: treeNodes.name, targetNode: targetNode.name })}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm">{{$t('public.confirm')}}</el-button>
        <el-button @click="cancel">{{$t('public.cancel')}}</el-button>
      </span>
    </el-dialog>
  </li>
</template>
<script>
  let treeNodes = {}
  // let isOpen = false
  export default {
    name: 'Item',
    data () {
      return {
        dialogShow: false,
        treeNodes: {},
        targetNode: {},
        deploy: false,
        activeName: this.model.pId ? '' : this.model._id
      }
    },
    props: {
      model: Object,
      active: {
        type: String,
        default: 'this.model._id'
      },
      open: {
        type: Boolean,
        default: false
      },
      dealTree: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    computed: {
      // 展开还是收起
      isFolder () {
        return this.model.children &&
          this.model.children.length
      }
    },
    watch: {
      // 监测active变化设置点击部门背景
      active () {
        this.activeName = this.active
      }
    },
    // 提交一次提交不上去，需在item接收再提交
    methods: {
      moveDept (data) {
        this.$emit('moveDept', data)
      },
      // 拖动前
      dragstart (model) {
        // this.nodeClick(model)
        this.deploy = false
        treeNodes = model
      },
      // 拖拽结束触发
      dragend () {
        this.deploy = true
      },
      // 进入目标到离开目标之间触发
      dragover (e) {
        e.preventDefault()
        return true
      },
      // 在目标元素上触发
      drop (model) {
        this.treeNodes = treeNodes
        this.targetNode = model
        if (this.treeNodes._id === this.targetNode._id) {
          return
        }
        let a = window.confirm(this.$t('config.agent.moveAgentTip', { treeNodes: this.treeNodes.name, targetNode: this.targetNode.name }))
        if (a) {
          this.confirm()
        }
        // this.dialogShow = true
      },
      // 弹窗点击确认时触发
      confirm () {
        let data = [{
          _id: treeNodes._id,
          pId: this.targetNode._id,
          treePath: `${this.targetNode.treePath}${treeNodes._id}/`
        }]
        this.$emit('moveDept', data)
        this.dialogShow = false
      },
      cancel () {
        // this.dialogShow = false
      },
      toggle () {
        if (this.isFolder) {
          this.deploy = !this.deploy
        }
      },
      nodeClick (model) {
        let _id = model._id
        let pId = model.pId
        this.$emit('nodeClick', {_id, pId})
      },
      handlerSelfClick (val) {
        this.$emit('nodeClick', val)
      },
      changeType () {
        if (!this.isFolder) {
          this.$set(this.model, 'children', [])
          this.deploy = true
        }
      },
      /**
       * [change description]
       * @param  {[type]} val [add , edit, del]
       * @return {[type]}     [description]
       */
      handlerChange (event, val) {
        this.$emit(event, {event, val})
      },
      handlerSelfChange (val) {
        this.$emit(val.event, val)
      }
    },
    beforeMount () {
      this.deploy = this.open
    }
  }
</script>
<style lang="stylus" scoped>
@import "../../../../../../assets/common.styl"
.active
  background #eee
  color $c-main
.item-first
  .icon-guanbi
  .icon-beizhu
    display node
.icon
  color $c-main
  font-size 14px
.el-icon-minus,.el-icon-plus
  border 1px solid $cf-gray5
  padding 1px
  color $cf-gray5
.icon-guanbi
  color $c-pink
.add-back
  display flex
  justify-content space-between
  padding 4px
  &:hover
    background  #cce6ff
.item
  cursor pointer
  padding-left 16px
.show-node
  display flex
  margin-right 26px
.node__mask
  margin-left 5px
  display flex
  .name
    display block
    margin-left 5px
    max-width 11em
    overflow hidden
    text-overflow ellipsis
    white-space nowrap
.edit-node .icon
  margin-right 12px
.last-option
  .edit-node
    visibility hidden
.last-option
  .li__item
    .add-back:hover
      .edit-node
        visibility visible
</style>
